<sqx-form-error bubble="true" closeable="true" [error]="contentError" />
<div class="inner-menu">
    @if (mode | async; as currentMode) {
        <ul class="nav nav-tabs2">
            <li class="nav-item">
                <a class="nav-link" [class.active]="currentMode === 'Content'" (click)="setMode('Content')">
                    {{ "contents.inspectContent" | sqxTranslate }}
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" [class.active]="currentMode === 'Data'" (click)="setMode('Data')">
                    {{ "contents.inspectData" | sqxTranslate }}
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" [class.active]="currentMode === 'FlatData'" (click)="setMode('FlatData')">
                    {{ "contents.inspectFlatData" | sqxTranslate }}
                </a>
            </li>
        </ul>
    }
</div>

<div class="inner-main">
    <sqx-code-editor borderless="true" [ngModel]="actualData | async" (ngModelChange)="setData($event)" valueMode="Json" />
</div>
